<template>
  <Container class="manage-list">
    <div class="container-header group" slot="header">
      <Input 
        class="start"
        v-model.trim="keyword"
        placeholder="姓名"
        @on-enter="onSearchBtnClick">
      </Input>
      <Button type="primary" icon="ios-search" class="btn-search" @click="onSearchBtnClick"></Button>
    </div>
    <Tabs v-model="tab">
      <Button 
        size="large" 
        class="item" 
        type="primary" 
        slot="extra"
        icon="md-add"
        @click="onAddAccount">新增账号</Button>
      <TabPane label="账号">
        <Table 
          :height="options.tableHeight" 
          stripe
          :columns="list.columns" 
          :data="list.data" 
          no-data-text="亲，没有找到相关记录哦！~"></Table>
        <div class="pager">
          <Page 
          :total="list.totalItem" 
          :current="list.currentPage"
          :page-size="list.pageSize"
          @on-change="onPageChange"
          @on-page-size-change="onPageSizeChange"
          show-sizer 
          placement="top"></Page>
        </div>
        <Loader :status="list.status" @refresh="getData"></Loader>
      </TabPane>
    </Tabs>
  </Container>
</template>
<script>
import table from '@/table'
import AccountListData from './list/AccountListData'
import { clearEmpty } from '@/util'
export default {
  name: 'setting/account/list',
  data() {
    return {
      list: AccountListData,
      keyword: '',
      options: {
        tableHeight: 300
      }
    }
  },
  mounted() {
		this.list.currentPage = ~~this.$route.query.currentPage || 1
    this.list.pageSize = ~~this.$route.query.pageSize || this.list.pageSize
    this.initTable()
    this.$bus.$on('onEdit', ({ id }) => this.onEdit(id))
    this.$bus.$on('onDelete', this.onDelete)
    this.getData()
  },
  destroyed() {
    this.$bus.$off()
  },
  methods: {
    ...table,
    onSearchBtnClick() {
      this.list.currentPage = 1
      this.getData()
    },
    getData() {
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        realName: this.keyword
      }
      param = clearEmpty(param)
      this.list.status = 'loading'
      this.$jsonPost('/supplier/supplier_user/page', param).then(data => {
        this.list.data = (data.records || []).map(item => {
          return {
            isEnabled: item.isEnabled,
            realName: item.realName,
            supplierName: item.supplierName,
            id: item.id,
            email: item.email ? item.email : '-',
            mobile: item.mobile,
            department: item.department ? item.department : '-',
            loginDate: item.loginDate ? item.loginDate.replace('T', ' ') : '-',
            loginIp: item.loginIp ? item.loginIp : '-',
            createDate: item.createDate,
            isLocked: item.isLocked,
            isMaster: item.isMaster
          }
        })
        this.list.totalItem = Number(data.total)
        this.backTableTop()
        this.list.status = 'pass'
      }).catch(() => {
        this.list.status = 'error'
      })
    },
    onAddAccount() {
      this.$router.push('/setting/account/edit')
    },
    onPageChange(number) {
			this.list.currentPage = number
			this.$router.push({
				name: 'setting/account/list',
				query: {
					currentPage: this.list.currentPage,
					pageSize: this.list.pageSize
				}
			})
      this.getData()
    },
    onPageSizeChange(pageSize) {
      this.list.currentPage = 1
			this.list.pageSize = pageSize
			this.$router.push({
				name: 'setting/account/list',
				query: {
					currentPage: this.list.currentPage,
					pageSize: this.list.pageSize
				}
			})
      this.getData()
    },
    onEdit(id) {
      this.$router.push({
        path: '/setting/account/edit',
        query: { 
          id 
        }
      })
    },
    onDelete(id, name) {
      this.$Modal.confirm({
        title: '删除',
        content: '确定删除当前账号？',
        onOk: () => {
          this.$ajaxGet('/supplier/supplier_user/remove/' + id).then(() => {
            this.$Notice.success({
              title: '删除成功',
              desc: `<span class="font-red">${name}</span> 已被删除。`
            })
            this.getData()
          })
        }
      })
    }
	},
	watch: {
		$route() {
			let page = ~~this.$route.query.currentPage
			let table = this.list
			if (table.currentPage !== page) {
				table.currentPage = ~~this.$route.query.currentPage === 0 ? 1 : ~~this.$route.query.currentPage
				this.getData()
			}
		}
	}
}
</script>